<template>
	<!-- 顶部 -->

	<div class="header width100" id="my_header">
		<div class="width100  float_l">
			<div class="float_l height_100">
				<div class="float_l height_100 logo cursor" @click="$router.push('/')">
					<img class="height_100" src="./uiz1.png">
				</div>
				<div class="float_l">
					<ul class="ul_li overflow">
						<li>
							<a @click.stop="$router.push('/')">知识库</a>
						</li>
						<li class="padding_r10">
							<a>社区中心<i class="icn-new"></i></a>
						</li>
						<li>
							<a>个人中心</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="float_r">
				<div class="float_l top_input">
					<input class="posi_relative search" type="text"  v-model="$store.state.productName" id="" style="padding-left: 5px;" placeholder="请输入想搜索的内容...">
					<img class="img_sousuo bianshou" src="../../common/img/uiz4.png" @click="search()">
				</div>
				<div class="float_l margin_l20 app">
					<img src="../../common/img/uiz5.png">
					<div class="download">
						<img src="../../common/img/appload.png" alt="" />
						<div class="float_l">
							<span>点击下载app</span>
							<li class="cursor"> <i class="fa fa-android"></i>  Android下载</li>
						</div>
					</div>
				</div>
				<div class="float_l margin_l40 bell">
					<i class="fa fa-bell"></i>
					<i class="fa fa-circle circle"></i>
				</div>
				<div class="float_l margin_l35">
					<img src="../../common/img/uiz6.png">
				</div>
				<div class="float_l margin_l30 margin_r40 dropdown">
					<img id="dLabel" src="../../common/img/uiz2.png" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
					<ul class="dropdown-menu text-right"  aria-labelledby="dLabel">
						<li class="cursor">
							<span><i class="fa fa-user-circle"></i> 个人中心</span>
						</li>
				    	<li role="separator" class="divider"></li>
				    	<li class="cursor">
				    		<span> <i  class="m-icon m-shut"></i> 退出登录</span>
				    	</li>
				  	</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loadingShow: false,
				productName:''
			}
		},
		mounted(){
			var that = this;
			$('#my_header .search').bind('keyup', function(event) {
			　　if (event.keyCode == "13") {			
			　　　　//回车执行查询			
			　　　　console.log('asdfsaf')	
				that.search()
			　　}			
			});
		},
		activated(){
            var that = this;
			$('#my_header .search').bind('keyup', function(event) {
			　　if (event.keyCode == "13") {			
			　　　　//回车执行查询
				that.search()
			　　}			
			});
       },
		methods: {
			open() {
				this.loadingShow = true
			},
			close() {
				this.loadingShow = false
			},
			change_productName(name){
				this.productName = name
			},
			search(){				
				var that = this;
				var url = this.$route.path
				if(url.indexOf('course_list')>=0){
					that.$emit('change_productname')
				}else{
					var obj = {'one_level':'','two_level':'','three_level':''}				
					for(var k in obj){
						that.$store.state[k] = obj[k]
					}				
					that.$router.push('/course_list')
				}				
				return;
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import '../variables.less';
	@import "../../common/less/base.less";
	.header {
		@header_height: 72;
		
		height: @header_height*@base_size;
		background-image: url(../../common/img/uiz20.jpg);
		position: relative;
		min-width: 1200px;
		z-index: 1111;
		>div {
			height: @header_height*@base_size;
			line-height: @header_height*@base_size;
			background-color: #FFFFFF;
			box-shadow: 0 4px 8px 0 rgba(7, 17, 27, .1);
			.logo {
				margin: 0 28px 0 24px;
			}
			.ul_li {
				li {
					float: left;
					padding: 0 20*@base_size;
					cursor: pointer;
					a {
						color: #4D555D;
						&:hover {
							color: #07111b !important;
						}
					}
				}
			}
		}
		/*下载app*/
		.float_r{
			>div{
				position: relative;
				
				&.app{
					&:hover{
						.download{
							display: block;
						}
					}
					.download{
						position: absolute;
						display: none;
						top: 100%;
						right: -50%;
						overflow: hidden;
						min-width: 270px;
						min-height: 100px;
						background-color: white;
						padding: 10px;
						img{
							width: 108px;
							float: left;
							vertical-align: top;
						}
						>div{
							line-height: 100%;
							color: #4D555D;
							padding-left: 10px;
							font-size: 16px;
							padding-top: 10px;
							text-indent: 1em;
							span{
								text-indent: 1em;
							}
						}
						li{
							text-indent: 0;
						    display: block;
						    font-size: 14px;
						    color: #fff;
						    width: 132px;
						    height: 36px;
						    line-height: 36px;
						    background: #4D555D;
						    border-radius: 18px;						    
						    margin: 0 auto;
						    margin-top: 35px;
						    text-align: center;
						    &:hover{
						    	background-color: darken(#4D555D,10%);
						    }
						}
					}
					
				}				
				
				
			}
			.bell{
				.circle{
					position: absolute;
					top: 20px;
					right: -8px;
					font-size: 5px;
					transform: scale(0.7);
					color: @color-red;
					/*display: none;*/
				}
				&:hover{
					color: @color-red;
				}
			}
			.dropdown-menu{
				padding: 10px 0;
				right: -5px;
				left: auto;
				min-width: 100px;
				line-height: 100%;
				
				li{
					min-width: 100px;
					padding-right: 10px;
				}
			}
			
		}
		.m-icon{
			width: 14px;
			height: 14px;
			vertical-align: middle;
			display: inline-block;
			background-size: cover;
			background-position: center;
		}
		.m-shut{
			background-image: url(shut .png);
		}
		
	}
	
	.my_search{
		position: fixed;
		z-index: 111111;
		top: 30px;
		right: 10px;
		padding-right: 54px;
		box-shadow: 0 2px 4px rgba(0,0,0,0.5);
		&:hover{
			input{
				width: 150px;
			}				
		}
		input{			
			padding: 8px 16px;
			/*border-radius: 10px;*/
			/*border: 1px solid black;*/
			transition: all 0.3s;		
			width: 60px;
			
		}
		.search_img{
			position: absolute;
			right: 0;
			top: 0;
			width: 54px;
			background-color: #03a9f4;
			height: 100%;
			color: white;
			font-size: 24px;
		}
		
	}
	
	
</style>